<template>
  <div class="mod-index-img">
    <el-dialog title="新增产权登记"
               :close-on-click-modal="false" :visible.sync="visible" @close="closeDialogHandle" width="570px">
      <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="auto" size="small">
        <el-form-item label="登记名称" prop="registeredName">
          <el-input type="text" placeholder="请输入登记名称"
                    v-model="dataForm.registeredName" ></el-input>
        </el-form-item>
        <el-form-item label="持有人" prop="possessor">
          <el-input type="text" placeholder="请输入持有人" v-model="dataForm.possessor"></el-input>
        </el-form-item>
        <el-form-item label="证书编号" prop="certificateNo">
          <el-input type="text" placeholder="请输入证书编号" v-model="dataForm.certificateNo"></el-input>
        </el-form-item>
        <el-form-item label="数字资产信息" prop="information">
          <el-input type="text" placeholder="请输入数字资产信息" v-model="dataForm.information"></el-input>
        </el-form-item>
        <el-form-item label="营业执照" prop="license">
          <img-upload v-model="dataForm.license"></img-upload>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="default-btn" @click="visible = false">{{ $t("remindPop.cancel") }}</div>
        <div class="default-btn primary-btn" @click="dataFormSubmit()">{{ $t("remindPop.confirm") }}</div>
      </span>
    </el-dialog>
  </div>
</template>

<script>



import ImgUpload from '@/components/img-upload'
import { Debounce } from '@/utils/debounce'
export default {
  data() {
    return {
      dataForm: {
        registeredName: null,
        possessor: null,
        information: null,
        license: null,
        certificateNo: null
      },
      brandSelectVisible: false,
      dataRule: {
        registeredName: [
          { required: true, message: '请输入登记名称', trigger: 'blur' }
        ],
        possessor: [
          { required: true, message: '请输入持有人', trigger: 'blur' }
        ],
        license: [
          { required: true, message: '请选择营业执照', trigger: 'change' }
        ],
        certificateNo: [
          { required: true, message: '请输入证书编号', trigger: 'blur' }
        ]
      },
      visible: false
    }
  },
  components: {
    ImgUpload
  },
  methods: {

    init(id) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
    },
    // 表单提交
    dataFormSubmit: Debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let param = this.dataForm
          this.$http({
            url: this.$http.adornUrl(`/platform/certificate`),
            method: param.brandId ? 'put' : 'post',
            data: this.$http.adornData(param)
          }).then(({ data }) => {
            this.$message({
              message: this.$i18n.t('remindPop.success'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList', this.page)
              }
            })
          })
        }
      })
    }, 1500),
    // 关闭对话框回调
    closeDialogHandle() {
      this.$refs['dataForm'].resetFields()
      this.dataForm = {
        registeredName: null,
        possessor: null,
        information: null,
        license: null,
        certificateNo: null
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-input__inner {
  line-height: 1px !important;
}
.mod-index-img {
  .select-categoryId {
    width: 60%;
  }
}
</style>
